<template>
    <div>
        <!-- type="border-card" -->
        <el-tabs v-model="activeName">
            <el-tab-pane :lazy="true" :name="TABSNAME.PromptWord" :label="TABSNAME.PromptWord">
                <AI-Prompt></AI-Prompt>
            </el-tab-pane>
            <el-tab-pane :lazy="true" :name="TABSNAME.Model" :label="TABSNAME.Model">
                <AI-Model></AI-Model>
            </el-tab-pane>
            <el-tab-pane :lazy="true" :name="TABSNAME.AITask" :label="TABSNAME.AITask">
                <AI-Task></AI-Task>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import AIModel from "./AIModel.vue";
import AIPrompt from "./AIPrompt.vue";
import AITask from "./RunTask.vue";

enum TABSNAME {
    Model = "模型",
    PromptWord = "提示词",
    AITask = "AI任务",
}

const router = useRouter()
const route = useRoute()
const store = useStore(Storekey)
const user = computed<Studycodemodel.Iuser>(() => {
    return store.getters.getuser;
});
const teamId = computed(() => {
    return user.value?.teamid
})

const activeName = ref(TABSNAME.PromptWord);

</script>

<style scoped>
.router-link-active {
    color: cadetblue;
}
</style>